<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="./icon.svg" type="image/x-icon">
    <!--除法 注意 20px/ n 原生用calc(20px / 4) 
    用 rem 根元素的字体大小值 -->
    <meta name="viewport" content="width=device-width, user-able=no,initial-scale=1.0">
    <title>移动</title>
    <style>
        *{
            margin: 0;
        }
        #p1 {
             overflow-wrap: break-word;/*有效果 */
            /* overflow-wrap:anywhere ;应该是兼容问题 */
        }
        .flex-wrap {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            height: 40vh;
            align-content: flex-start;
            box-sizing: border-box;
            /* flex-direction: row; */
            border: 1px solid red;

        }
        .flex-wrap > *{
            background-color: bisque;
        }
        .flex-child {
            width: 10vw ;
            height: 20px;
            /*background-color: aquamarine;*/
            border:3px solid  black;
        }
        .flex-child.red{
            background-image: radial-gradient(red, purple);
            cursor: move;
        }
        .flex-child.blue{
            background-image: radial-gradient(rgb(255, 115, 0), rgb(128, 0, 100));
            cursor: move;
        }
        .flex-child.green{
            background-image: radial-gradient(rgb(255, 115, 0), rgb(0, 128, 90));
            cursor: move;
        }
    </style>
</head>
<body>
    <p id="p1">123</p><span>片段5 56分</span>
    <b> 物理分辨率与css分辨率的比值 为1的时候 就是1个像素点显示一个css单位  比率为2时4个像素点显示一个css单位</b><span id="devicePixelRatio"></span>
    <div >

    </div>
    <svg id="circle" viewBox=" 0 0 10 10" width=" 50vw">
        <circle cx="50%" cy="50%" r= '5' fill=" purple"></circle>
    </svg>
    <!-- aligncontent 堆砌 -->
    <div class="flex-wrap">

        <div class="flex-child" id="flex1"></div>
        <div class="flex-child"></div>
        <div class="flex-child blue"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child red"></div>
        <div class="flex-child"></div>
        <div class="flex-child green"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child">
            <input type="text" name="" id="">
        </div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
        <div class="flex-child"></div>
    </div>
</body>
<script>
    document.documentElement.fontSize = window.innerWidth/ 100  + 'px';
    let p1 = document.getElementById('p1');
    p1.innerText = window.devicePixelRatio +'\n' + window.innerWidth;
    let flex1 = document.getElementById('flex1');
    flex1.addEventListener('touchstart',handleTouch)
    flex1.addEventListener('touchend',handleTouch)
    flex1.addEventListener('touchmove',handleTouch)
    flex1.addEventListener('touchcancel',handleTouch)
    function handleTouch(e){
    let span =   document.createElement('span');
      span.textContent = e.type;
      console.log(e)
      p1.appendChild(span);
    }
    let flex2 = document.querySelector('.flex-child.red');
    flex2.addEventListener('touchstart', (ev)=> {
        const fa = ev.changedTouches[0]
        const{clientX: ox, clientY:oy} = fa; 
        ev.preventDefault()

        flex2.addEventListener('touchmove', (e)=> {
            console.log(e);
            let el = e.changedTouches[0]; //触发事件的元素，这里才能拿到坐标
            const{clientX: cx, clientY:cy} = el;
            // let [nowx,nowy] = [ox - cx, oy - cy];// 反了
            let [nowx,nowy] = [  cx-ox, -oy + cy];// 
            flex2.style.transform = `translate(${nowx}px, ${nowy}px)`; 
            e.preventDefault()
        })
    });
    flex2.addEventListener('touchend', ()=> {
      
    })
    let flex3 = document.querySelector('.flex-child.blue');


    flex3.addEventListener('mousedown', (e)=> {
        console.log(e)
        const{offsetX, offsetY,clientX,clientY} = e;
        const oldX = clientX;
        const oldY = clientY;
        // 这里监听的元素就是可移动范围,用 addevent 添加的事件即便把on属性置为null 也不会移除
        document.onmousemove= (ev)=> {
            let translateX = ev.clientX - oldX;
            let translateY = ev.clientY - oldY;
            console.log(translateY, translateX)
            e.target.style.transform = `translate(${translateX}px, ${translateY}px)`
        }

    })
    // 这里还是监听目标元素
    flex3.addEventListener('mouseup', (e)=> {
    
        document.onmousemove = null;
    })
    //调用preventDefault()可阻止触摸事件（300ms）后执行鼠标事件,在之前触摸事件的坐标点，不一定是触摸事件的目标元素
    class propEvent {
        constructor(option) {
            this.eventObj = option.obj;
            this.target = option.target;
            this.eventType = option.eventType || 'click';
            this.bindEvent();
        }
        bindEvent(){
            let _this = this;
            this.target.addEventListener(this.eventType, function(e){
                let target = e.target;
                let dataset = target.dataset;
                for(let key in dataset) {
                    if(_this.eventObj.__proto__[a]) {
                        let data  ={
                            target,
                            ev:e,
                            prop:a
                        }
                        _this.eventObj.__proto__[a].call(_this.eventObj,data)
                    }
                }
            })
        }
    }

    class handleElement {
        constructor(option){
            this.target = document.querySelector(option);
            this.event = new propEvent({
                obj:this,
                target: this.target
                
            })
            
        }
        open(option) {
            console.log('打开');
        }
        hide() {
            console.log( '关闭' );
        }
    }
    new handleElement('#circle')
/* 监听devicePixelRatio*/
    let pixelRatioBox = document.querySelector("#devicePixelRatio");
let mqString = `(resolution: ${window.devicePixelRatio}dppx)`;

const updatePixelRatio = () => {
  let pr = window.devicePixelRatio;
  let prString = (pr * 100).toFixed(0);
  pixelRatioBox.innerText = `${prString}% (${pr.toFixed(2)})`;
}

updatePixelRatio();

matchMedia(mqString).addListener(updatePixelRatio);
</script>
</html>